<template>
  <view class="container">
    
    <Card class="filter-card">
      <view class="filter-item">
        <text class="label">关联学生</text>
        <picker 
          mode="selector" 
          :range="students" 
          @change="onStudentChange"
        >
          <view class="picker">
            {{ selectedStudent || '全部学生' }}
          </view>
        </picker>
      </view>
      
      <view class="filter-item">
        <text class="label">时间范围</text>
        <view class="date-range">
          <view class="date-picker">
            <picker 
              mode="date" 
              :value="startDate" 
              @change="onStartDateChange"
            >
              <view class="picker">
                {{ startDate || '开始日期' }}
              </view>
            </picker>
          </view>
          <text class="separator">至</text>
          <view class="date-picker">
            <picker 
              mode="date" 
              :value="endDate" 
              @change="onEndDateChange"
            >
              <view class="picker">
                {{ endDate || '结束日期' }}
              </view>
            </picker>
          </view>
        </view>
      </view>
    </Card>
    
    <Card class="summary-card">
      <view class="summary-item">
        <text class="summary-label">总收入</text>
        <text class="summary-income">+{{ summary.income }}分</text>
      </view>
      
      <view class="summary-item">
        <text class="summary-label">总支出</text>
        <text class="summary-expense">-{{ summary.expense }}分</text>
      </view>
      
      <view class="summary-item">
        <text class="summary-label">净增长</text>
        <text class="summary-net" :class="summary.net >= 0 ? 'positive' : 'negative'">
          {{ summary.net >= 0 ? '+' : '' }}{{ summary.net }}分
        </text>
      </view>
    </Card>
    
    <view class="history-list">
      <Card 
        v-for="(record, index) in historyRecords" 
        :key="index" 
        class="record-card"
      >
        <view class="record-header">
          <view class="record-info">
            <text class="record-title">{{ record.title }}</text>
            <text class="record-desc">{{ record.description }}</text>
          </view>
          <text class="record-points" :class="record.points > 0 ? 'positive' : 'negative'">
            {{ record.points > 0 ? '+' : '' }}{{ record.points }}分
          </text>
        </view>
        <view class="record-footer">
          <text class="record-student">{{ record.student }}</text>
          <text class="record-time">{{ record.time }}</text>
        </view>
      </Card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      students: ['全部学生', '张小明', '李小红', '王小刚'],
      selectedStudent: '全部学生',
      startDate: '2025-08-01',
      endDate: '2025-08-31',
      summary: {
        income: 120,
        expense: 30,
        net: 90
      },
      historyRecords: [
        {
          title: '完成学习计划',
          description: '完成数学每日练习计划',
          points: 5,
          student: '张小明',
          time: '2025.08.28 19:30'
        },
        {
          title: '目标进度奖励',
          description: '学习目标完成50%',
          points: 20,
          student: '李小红',
          time: '2025.08.28 18:00'
        },
        {
          title: '心愿兑换',
          description: '兑换新书包',
          points: -50,
          student: '王小刚',
          time: '2025.08.27 15:30'
        },
        {
          title: '连续签到奖励',
          description: '连续签到7天',
          points: 15,
          student: '张小明',
          time: '2025.08.27 08:00'
        },
        {
          title: '考试成绩奖励',
          description: '数学考试90分以上',
          points: 30,
          student: '李小红',
          time: '2025.08.26 12:00'
        }
      ]
    };
  },
  
  methods: {
    onStudentChange(e) {
      this.selectedStudent = this.students[e.detail.value];
    },
    
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.filter-card {
  margin-bottom: $spacing-base;
}

.filter-item {
  margin-bottom: $spacing-lg;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.picker {
  width: 100%;
  height: 80rpx;
  padding: 0 $spacing-base;
  line-height: 80rpx;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.date-range {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.date-picker {
  flex: 1;
}

.separator {
  margin: 0 $spacing-base;
  color: $text-secondary;
}

.summary-card {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-base;
}

.summary-item {
  flex: 1;
  text-align: center;
  padding: $spacing-base 0;
  
  &:not(:last-child) {
    border-right: 1rpx solid $text-tertiary;
  }
}

.summary-label {
  display: block;
  font-size: $font-size-sm;
  color: $text-secondary;
  margin-bottom: $spacing-xs;
}

.summary-income {
  font-size: $font-size-base;
  color: $secondary-color;
  font-weight: bold;
}

.summary-expense {
  font-size: $font-size-base;
  color: $error-color;
  font-weight: bold;
}

.summary-net {
  font-size: $font-size-base;
  font-weight: bold;
}

.positive {
  color: $secondary-color;
}

.negative {
  color: $error-color;
}

.history-list {
  margin-bottom: $spacing-lg;
}

.record-card {
  margin-bottom: $spacing-sm;
}

.record-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

.record-info {
  flex: 1;
}

.record-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.record-desc {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.record-points {
  font-size: $font-size-base;
  font-weight: bold;
  min-width: 80rpx;
  text-align: right;
}

.record-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: $font-size-sm;
  color: $text-tertiary;
}
</style>